<template>
  <div>
    <h1>{{ num }}</h1>
    <button @click="addnum">++</button>

    <div>{{ user }}</div>
    <button @click="changeuser">修改对象</button>
    <div>{{ getcount }}</div>
  </div>
</template>

<!-- <script>
import { ref } from "vue";

export default {
  name: "App",
  setup() {
    return {};
  },
  components: {},
};
</script> -->

<script setup>
// setup属性是setup函数的语法糖,当script标签添加上setup属性时,模板使用的是响应式数据，不需要再return
// 注意:vue3已经废弃了过滤器,如果需要实现过滤功能vue3使用函数实现过滤
import { ref, reactive, watch, computed } from "vue";

let num = ref(0);
let user = reactive({
  uname: "admin",
  pwd: "123456",
});
function addnum() {
  num.value++;
}
function changeuser() {
  console.log("231231241241241234123");
  user.pwd = "11111111";
}

watch(num, (n, o) => {
  console.log(n);
  console.log(o);
});
let getcount = computed(() => {
  return num.value + 900;
});
</script>

<style></style>
